Este é um exemplo simples de um script JavaScript que solicita o nome do visitante e exibe uma mensagem de boas-vindas personalizada. Caso o nome não seja fornecido, uma mensagem de erro é exibida.
Para revolver esse problema eu utilizaria um form, com input e eventos para exibir em tela o resultado, porem nas aulas da
alura
é ensinado o método simplificado usandoprompt
,if
ealert
, e presumo que é isso que os avaliadores do trilhas esperam.
O arquivo HTML contém um botão que, quando clicado, aciona a função solicitarNome()
definida no arquivo script.js
.
Abaixo do botão uma caixa que inicializa vazia e com a inserção do usuário ela é preenchida com a resposta da ultima mensagem para o usuário
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Boas-vindas à Empresa Trilhas Inova</title>
</head>
<body>
<h1>Boas-vindas à Empresa Trilhas Inova</h1>
<button onclick="solicitarNome()">Clique aqui para ser bem-vindo(a)</button>
<h2 id="msg" style="border: 1px solid orange; padding: 20px;"></h2>
<!-- <script src="script.js"></script> -->
</body>
</html>
A logica do js está implementada na tag script
no próprio html, nesta tag script implementei a lógica para solicitar o nome do visitante e exibir a mensagem de boas-vindas personalizada.
<script>
function solicitarNome() {...}
function printMsg(text) {...}
</script>
solicitarNome()
Esta função utiliza a função prompt()
para solicitar o nome do visitante. Se o nome for fornecido, a função printMsg(text)
é usada para exibir a mensagem de boas-vindas personalizada. Caso contrário, uma mensagem de erro é exibida.
function solicitarNome() {
// Solicita o nome do visitante
let nome = prompt("Por favor, digite seu nome:");
if (nome === null) {
//break out of the function early
return;
}
// Verifica se o nome foi fornecido
if (nome) {
// Exibe a mensagem de boas-vindas personalizada
printMsg(`Olá, ${nome}, seja bem-vindo(a) à nossa empresa.`);
} else {
// Exibe uma mensagem de erro caso o nome não seja fornecido
printMsg("Desculpe, nenhum nome fornecido!");
}
}
printMsg(text)
Fiz essa função para exibir a mensagem ao usuário utilizando o alert(text)
e também inserir em tela o texto da mensagem
function printMsg(text){
// captura o elemento h2 pela id "msg"
const msg = document.getElementById('msg');
// substitui o corpo do elemento pelo texto da mensagem
msg.textContent = text
// emite um alerta com o texto da menssagem
alert(text)
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Boas-vindas à Empresa Trilhas Inova</title>
</head>
<body>
<h1>Boas-vindas à Empresa Trilhas Inova</h1>
<button onclick="solicitarNome()">Clique aqui para ser bem-vindo(a)</button>
<h2 id="msg" style="border: 1px solid orange; padding: 20px;"></h2>
<!-- <script src="script.js"></script> -->
</body>
<script>
function solicitarNome() {
// Solicita o nome do visitante
let nome = prompt("Por favor, digite seu nome:");
if (nome === null) {
//break out of the function early
return;
}
// Verifica se o nome foi fornecido
if (nome) {
// Exibe a mensagem de boas-vindas personalizada
printMsg(`Olá, ${nome}, seja bem-vindo(a) à nossa empresa.`);
} else {
// Exibe uma mensagem de erro caso o nome não seja fornecido
printMsg("Desculpe, nenhum nome fornecido!");
}
}
function printMsg(text) {
// captura o elemento h2 pela id "msg"
const msg = document.getElementById('msg');
// substitui o corpo do elemento pelo texto da mensagem
msg.textContent = text
// emite um alerta com o texto da menssagem
alert(text)
}
</script>
</html>